<template>
  <div class="login-container">
    <el-form
      class="login-form"
      :model="loginForm"
      ref="loginFormRef"
      :rules="loginRules"
      :inline="false"
      size="large"
    >
      <div class="title-container">
        <h3 class="title">
          <img
            style="width: 40px; height: 40px"
            :src="logo"
          />SunnyFrame自动化测试平台
        </h3>
      </div>
      <el-form-item prop="username">
        <el-input
          :prefix-icon="User"
          placeholder="请输入用户名"
          v-model="loginForm.username"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          :prefix-icon="Lock"
          placeholder="请输入密码"
          v-model="loginForm.password"
          @keyup.enter="handleLogin"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button class="login-button" type="primary" @click="handleLogin"
          >登录</el-button
        >
      </el-form-item>
      <div class="tips">
        <div>
          <span style="margin-right: 20px">测试账号: roy</span>
          <span> 密码: 123456</span>
        </div>
        <div>
          <a @click="gotoRegister" class="register-link">现在注册</a>
        </div>
      </div>
    </el-form>
    <div class="copyright">
      <p>
        Copyright © 2019-2023 湖南特斯汀信息科技有限公司
        <a href="https://beian.miit.gov.cn" target="_blank"
          >testingedu.com.cn</a
        >
      </p>
      <p>湘ICP备18014791号 版权所有</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { localStorage } from "@/api/storage";
import { loginApi } from "@/api/sunnyuser";
import router from "@/router";
import { User, Lock } from "@element-plus/icons-vue";
import type { LoginUser, SunnyUser } from "@/types/sunnyUser/type";
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
import { ref } from "vue";
import { useUserStore } from "@/stores/userStore";
const userStore = useUserStore();
const loginFormRef = ref<FormInstance>();
const loginForm = ref<LoginUser>({
  username: "",
  password: "",
});
const loginRules = ref<FormRules>({
  username: [
    { required: true, message: "请填写用户名！", trigger: "blur" },
    { min: 3, max: 18, message: "用户名长度请控制在3到18位", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请填写密码！", trigger: "blur" },
    { min: 3, max: 18, message: "密码长度请控制在3到18位", trigger: "blur" },
  ],
});

const logo = ref(new URL("@/assets/img/logo_small.png", import.meta.url).href);

/**
 * 调用登录的接口
 * 完成token的存储
 * 进行页面的跳转
 */
function handleLogin() {
  if (!loginFormRef.value) {
    ElMessage.error("页面错误，请刷新页面重试");
    return;
  }
  loginFormRef.value.validate((valid) => {
    if (valid) {
      loginApi(loginForm.value).then((response) => {
        console.log(response);
        if (response.headers) {
          const token = response.headers.authorization;
          localStorage.set("token", "Bearer " + token);
          userStore.getUser();
          //完成页面跳转
          router.push({ name: "home" });
        }
      });
    } else {
      ElMessage.error("请按要求填写用户名密码");
    }
  });
}

function gotoRegister() {
  router.push({ name: "register" });
}
</script>

<style scoped>
.login-container {
  width: 100vw;
  height: 100vh;
  background-image: url(@/assets/img/sunnyflowers.jpg);
  background-size: 100% 100%;
}

.login-form {
  position: relative;
  width: 520px;
  padding: 160px 35px 0;
  margin: 0 auto;
  overflow: hidden;
}

.login-form :deep(label) {
  color: #fafafa !important;
}

.title-container {
  position: relative;
}
.title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #fff;
  margin: 0px auto 40px auto;
  text-align: center;
  font-weight: bold;
}

.login-button {
  width: 100%;
}

.tips {
  font-size: 15px;
  color: #fff;
  margin-bottom: 10px;
}

.register-link {
  top: -20px;
  cursor: pointer;
  position: relative;
  font-size: 15px;
  color: white;
  float: right;
}

:deep(.el-input__icon) {
  font-size: 20px;
}

.copyright {
  width: 100%;
  font-size: 13px;
  text-align: center;
  color: white;
}
.copyright a:visited {
  color: white;
}
</style>
